<template>
  <div class="workflow-setting-container">
    <!-- 页面头部 -->
    <div class="workflow-header">
      <div class="header-content">
        <div class="ancient-title">工作流程设置</div>
        <div class="header-subtitle">阴曹地府 · 部门协作流程管理</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">🔄</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 路由信息 -->
    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/dashboard"><HomeOutlined />工作台</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <router-link to="/management"><ApartmentOutlined />机构管理</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <router-link to="/management/department-cooperation"><TeamOutlined />部门协作管理</router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item> <NodeIndexOutlined />{{ $route.meta.title }} </a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 流程管理 -->
    <a-card title="工作流程管理" :bordered="false">
      <template #extra>
        <a-space>
          <a-button type="primary" @click="showCreateWorkflowModal"> <PlusOutlined />新建流程 </a-button>
          <a-button @click="exportWorkflows"> <ExportOutlined />导出流程 </a-button>
        </a-space>
      </template>

      <div class="workflows-list">
        <div v-for="workflow in workflows" :key="workflow.id" class="workflow-item">
          <div class="workflow-header">
            <div class="workflow-info">
              <h4 class="workflow-name">{{ workflow.name }}</h4>
              <p class="workflow-description">{{ workflow.description }}</p>
              <div class="workflow-tags">
                <a-tag :color="workflow.status === 'active' ? 'green' : 'red'">
                  {{ workflow.status === 'active' ? '启用' : '禁用' }}
                </a-tag>
                <a-tag color="blue">{{ workflow.category }}</a-tag>
                <a-tag color="purple">{{ workflow.steps.length }}个步骤</a-tag>
              </div>
            </div>
            <div class="workflow-actions">
              <a-space>
                <a-button type="link" @click="editWorkflow(workflow)"> <EditOutlined />编辑 </a-button>
                <a-button type="link" @click="viewWorkflow(workflow)"> <EyeOutlined />查看 </a-button>
                <a-button type="link" @click="testWorkflow(workflow)"> <PlayCircleOutlined />测试 </a-button>
              </a-space>
            </div>
          </div>

          <div class="workflow-steps">
            <div class="steps-container">
              <div v-for="(step, index) in workflow.steps" :key="step.id" class="step-item">
                <div class="step-number">{{ index + 1 }}</div>
                <div class="step-content">
                  <div class="step-name">{{ step.name }}</div>
                  <div class="step-department">{{ getDepartmentName(step.department) }}</div>
                  <div class="step-duration">{{ step.estimatedDuration }}天</div>
                </div>
                <div v-if="index < workflow.steps.length - 1" class="step-arrow">
                  <ArrowRightOutlined />
                </div>
              </div>
            </div>
          </div>

          <div class="workflow-stats">
            <a-row :gutter="16">
              <a-col :span="6">
                <div class="stat-item">
                  <div class="stat-number">{{ workflow.totalExecutions }}</div>
                  <div class="stat-label">执行次数</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="stat-item">
                  <div class="stat-number">{{ workflow.avgDuration }}天</div>
                  <div class="stat-label">平均用时</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="stat-item">
                  <div class="stat-number">{{ workflow.successRate }}%</div>
                  <div class="stat-label">成功率</div>
                </div>
              </a-col>
              <a-col :span="6">
                <div class="stat-item">
                  <div class="stat-number">{{ workflow.efficiency }}%</div>
                  <div class="stat-label">效率</div>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>
      </div>
    </a-card>

    <!-- 创建流程弹窗 -->
    <a-modal v-model:open="createWorkflowModalVisible" title="创建工作流程" @ok="handleCreateWorkflow" @cancel="handleCreateWorkflowCancel" width="800px">
      <a-form ref="workflowFormRef" :model="workflowForm" :rules="workflowRules" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="流程名称" name="name">
              <a-input v-model:value="workflowForm.name" placeholder="请输入流程名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="流程类别" name="category">
              <a-select v-model:value="workflowForm.category" placeholder="选择流程类别">
                <a-select-option value="审判流程">审判流程</a-select-option>
                <a-select-option value="转世流程">转世流程</a-select-option>
                <a-select-option value="协调流程">协调流程</a-select-option>
                <a-select-option value="管理流程">管理流程</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="流程描述" name="description">
          <a-textarea v-model:value="workflowForm.description" placeholder="详细描述流程的目的和适用场景" :rows="3" />
        </a-form-item>

        <a-form-item label="流程步骤" name="steps">
          <div class="steps-config">
            <div v-for="(step, index) in workflowForm.steps" :key="index" class="step-config">
              <a-row :gutter="8">
                <a-col :span="6">
                  <a-input v-model:value="step.name" placeholder="步骤名称" />
                </a-col>
                <a-col :span="6">
                  <a-select v-model:value="step.department" placeholder="负责部门">
                    <a-select-option v-for="dept in allDepartments" :key="dept.id" :value="dept.id">
                      {{ dept.name }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="4">
                  <a-input-number v-model:value="step.estimatedDuration" placeholder="预计天数" :min="0" style="width: 100%" />
                </a-col>
                <a-col :span="6">
                  <a-input v-model:value="step.description" placeholder="步骤说明" />
                </a-col>
                <a-col :span="2">
                  <a-button type="text" danger @click="removeStep(index)">
                    <DeleteOutlined />
                  </a-button>
                </a-col>
              </a-row>
            </div>
            <a-button type="dashed" @click="addStep" style="width: 100%; margin-top: 8px"> <PlusOutlined />添加步骤 </a-button>
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { HomeOutlined, ApartmentOutlined, TeamOutlined, NodeIndexOutlined, PlusOutlined, ExportOutlined, EditOutlined, EyeOutlined, PlayCircleOutlined, ArrowRightOutlined, DeleteOutlined } from '@ant-design/icons-vue'

// 响应式数据
const createWorkflowModalVisible = ref(false)
const workflowFormRef = ref()

// 部门数据
const allDepartments = ref([
  { id: 1, name: '第一殿秦广王府' },
  { id: 2, name: '第二殿楚江王府' },
  { id: 3, name: '第三殿宋帝王府' },
  { id: 4, name: '第四殿五官王府' },
  { id: 5, name: '第五殿阎罗王府' },
  { id: 10, name: '第十殿转轮王府' }
])

// 工作流程数据
const workflows = ref([
  {
    id: 1,
    name: '标准审判流程',
    description: '适用于一般性罪案的标准审判流程',
    category: '审判流程',
    status: 'active',
    totalExecutions: 1256,
    avgDuration: 5.2,
    successRate: 95,
    efficiency: 88,
    steps: [
      { id: 1, name: '初审分流', department: 1, estimatedDuration: 1, description: '对案件进行初步分类' },
      { id: 2, name: '专业审判', department: 2, estimatedDuration: 3, description: '由专业法官进行详细审理' },
      { id: 3, name: '判决执行', department: 2, estimatedDuration: 1, description: '执行最终判决' },
      { id: 4, name: '转世安排', department: 10, estimatedDuration: 1, description: '安排后续转世事宜' }
    ]
  },
  {
    id: 2,
    name: '紧急案件处理流程',
    description: '用于处理紧急重大案件的快速流程',
    category: '审判流程',
    status: 'active',
    totalExecutions: 89,
    avgDuration: 2.5,
    successRate: 92,
    efficiency: 95,
    steps: [
      { id: 1, name: '紧急受理', department: 1, estimatedDuration: 0.5, description: '快速受理紧急案件' },
      { id: 2, name: '联合审判', department: 5, estimatedDuration: 1.5, description: '多部门联合审理' },
      { id: 3, name: '即时执行', department: 5, estimatedDuration: 0.5, description: '立即执行判决' }
    ]
  },
  {
    id: 3,
    name: '转世轮回标准流程',
    description: '规范的转世轮回处理流程',
    category: '转世流程',
    status: 'active',
    totalExecutions: 12000,
    avgDuration: 3.0,
    successRate: 98,
    efficiency: 96,
    steps: [
      { id: 1, name: '生前评估', department: 1, estimatedDuration: 1, description: '评估生前行为' },
      { id: 2, name: '等级核定', department: 10, estimatedDuration: 1, description: '确定转世等级' },
      { id: 3, name: '投胎安排', department: 10, estimatedDuration: 1, description: '安排具体投胎事宜' }
    ]
  }
])

// 表单数据
const workflowForm = reactive({
  name: '',
  category: '',
  description: '',
  steps: [{ name: '', department: null, estimatedDuration: 1, description: '' }]
})

// 表单验证规则
const workflowRules = {
  name: [{ required: true, message: '请输入流程名称', trigger: 'blur' }],
  category: [{ required: true, message: '请选择流程类别', trigger: 'change' }],
  description: [{ required: true, message: '请输入流程描述', trigger: 'blur' }]
}

// 方法
const getDepartmentName = (deptId) => {
  const dept = allDepartments.value.find((d) => d.id === deptId)
  return dept ? dept.name : `第${deptId}殿`
}

const showCreateWorkflowModal = () => {
  Object.assign(workflowForm, {
    name: '',
    category: '',
    description: '',
    steps: [{ name: '', department: null, estimatedDuration: 1, description: '' }]
  })
  createWorkflowModalVisible.value = true
}

const handleCreateWorkflow = async () => {
  try {
    await workflowFormRef.value.validate()
    const newWorkflow = {
      id: Date.now(),
      ...workflowForm,
      status: 'active',
      totalExecutions: 0,
      avgDuration: 0,
      successRate: 0,
      efficiency: 0,
      steps: workflowForm.steps.map((step, index) => ({ ...step, id: index + 1 }))
    }
    workflows.value.push(newWorkflow)
    message.success('工作流程创建成功')
    createWorkflowModalVisible.value = false
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

const handleCreateWorkflowCancel = () => {
  createWorkflowModalVisible.value = false
}

const addStep = () => {
  workflowForm.steps.push({ name: '', department: null, estimatedDuration: 1, description: '' })
}

const removeStep = (index) => {
  workflowForm.steps.splice(index, 1)
}

const editWorkflow = (workflow) => {
  message.info(`编辑流程: ${workflow.name}`)
}

const viewWorkflow = (workflow) => {
  message.info(`查看流程详情: ${workflow.name}`)
}

const testWorkflow = (workflow) => {
  message.info(`测试流程: ${workflow.name}`)
}

const exportWorkflows = () => {
  message.info('工作流程导出功能开发中...')
}

onMounted(() => {
  // 页面加载时的初始化逻辑
})
</script>

<style lang="scss" scoped>
.workflow-setting-container {
  padding: 24px;

  .workflow-header {
    text-align: center;
    margin-bottom: 32px;

    .header-content {
      .ancient-title {
        font-size: 32px;
        font-weight: bold;
        color: $secondary-color;
        margin-bottom: 8px;
        text-shadow: 0 0 20px rgba(212, 153, 10, 0.3);
      }

      .header-subtitle {
        font-size: 16px;
        color: $text-secondary;
        letter-spacing: 2px;
      }
    }

    .header-decoration {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      gap: 16px;

      .decoration-line {
        width: 80px;
        height: 1px;
        background: linear-gradient(90deg, transparent, $secondary-color, transparent);
      }

      .decoration-symbol {
        font-size: 20px;
        color: $secondary-color;
        font-weight: bold;
      }
    }
  }

  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  .workflows-list {
    .workflow-item {
      margin-bottom: 24px;
      padding: 24px;
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 12px;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
      }

      .workflow-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;

        .workflow-info {
          flex: 1;

          .workflow-name {
            margin: 0 0 8px 0;
            color: $primary-color;
            font-size: 20px;
            font-weight: bold;
          }

          .workflow-description {
            margin: 0 0 12px 0;
            color: $text-secondary;
            line-height: 1.6;
          }

          .workflow-tags {
            .ant-tag {
              margin-right: 8px;
            }
          }
        }
      }

      .workflow-steps {
        margin-bottom: 20px;

        .steps-container {
          display: flex;
          align-items: center;
          gap: 16px;
          padding: 16px;
          background: rgba(212, 153, 10, 0.05);
          border-radius: 8px;
          overflow-x: auto;

          .step-item {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 150px;

            .step-number {
              width: 24px;
              height: 24px;
              border-radius: 50%;
              background: $secondary-color;
              color: white;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 12px;
              font-weight: bold;
              flex-shrink: 0;
            }

            .step-content {
              .step-name {
                font-size: 14px;
                font-weight: bold;
                color: $primary-color;
                margin-bottom: 2px;
              }

              .step-department {
                font-size: 12px;
                color: $text-secondary;
                margin-bottom: 2px;
              }

              .step-duration {
                font-size: 11px;
                color: $secondary-color;
              }
            }
          }

          .step-arrow {
            color: $secondary-color;
            font-size: 16px;
            flex-shrink: 0;
          }
        }
      }

      .workflow-stats {
        .stat-item {
          text-align: center;

          .stat-number {
            font-size: 20px;
            font-weight: bold;
            color: $secondary-color;
            margin-bottom: 4px;
          }

          .stat-label {
            font-size: 12px;
            color: $text-secondary;
          }
        }
      }
    }
  }

  .steps-config {
    .step-config {
      margin-bottom: 8px;
    }
  }

  :deep(.ant-card) {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(212, 153, 10, 0.2);
    border-radius: 12px;
  }

  :deep(.ant-card-head) {
    border-bottom: 1px solid rgba(212, 153, 10, 0.2);
  }
}
</style>
